<template>
  <div class="breadcrumb">
    <i class="iconfont icon-home" @click="toHome"></i>
    <p>
      <router-link :to="item.path" v-for="(item, index) in breadcrumbs" :key="index">{{item.titleKey ? $t(item.titleKey) : item.title }}</router-link>
    </p>
  </div>
</template>
<script>
export default {
  name: 'breadcrumb',
  props: {
    breadcrumbs: {
      type: Array,
    },
  },
  methods: {
    toHome() {
      this.$router.push('/');
    },
  },
};
</script>
<style lang="scss" scoped>
.breadcrumb{
  font-size: 18px;
  line-height: 27px;
  padding: 20px 0 20px 5px;
  // margin-top:30px;
  color: #999;
  >.icon-home{
    font-size: 24px;
    color: #247ba0;
    margin-right: 5px;
    cursor: pointer;
  }
  >p{
    display: inline-block;
    &::before{
      content: "/";
      font-size: 20px;
      font-weight: 300;
      margin-right: 5px;
    }
    a{
      color: #999;
      &:hover,&.router-link-exact-active{
        text-decoration: none;
        color:  #247ba0;
      }
      &::after{
        content: "/";
        color: #999;
        font-size: 20px;
        font-weight: 300;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
}
</style>
